<template>
  <div class="home">
    <el-carousel height="400px">
      <el-carousel-item v-for="item in carouselItems" :key="item.id">
        <div class="carousel-item">
          <img :src="item.image" :alt="item.title" class="carousel-image" />
          <h3 class="carousel-title">{{ item.title }}</h3>
        </div>
      </el-carousel-item>
    </el-carousel>

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="8" v-for="event in featuredEvents" :key="event.id">
        <el-card :body-style="{ padding: '0px' }">
          <div class="event-image">
            <img :src="event.imageUrl || '/images/default-event.jpg'" :alt="event.title" class="event-img" />
          </div>
          <div style="padding: 14px;">
            <h4>{{ event.title }}</h4>
            <p>{{ formatDate(event.date) }} | {{ event.venue }}</p>
            <div class="bottom">
              <el-button type="text" class="button" @click="viewEvent(event.id)">查看详情</el-button>
              <el-tag type="danger">¥{{ event.price }}</el-tag>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import api from '../api'
import { ElMessage } from 'element-plus'

export default {
  name: 'Home',
  setup() {
    const router = useRouter()
    
    const carouselItems = ref([
      { 
        id: 1, 
        title: '周杰伦2024演唱会', 
        image: '/images/banner1.jpg'  // 使用绝对路径
      },
      { 
        id: 2, 
        title: '话剧《雷雨》全国巡演', 
        image: '/images/banner2.jpg' 
      },
      { 
        id: 3, 
        title: '王者荣耀电竞大赛', 
        image: '/images/banner3.jpg' 
      }
    ])

    const featuredEvents = ref([])

    // 从后端API获取演出数据
    const fetchEvents = async () => {
      try {
        const response = await api.get('/events')
        // 只取最新的3个演出
        featuredEvents.value = response.slice(0, 3)
      } catch (error) {
        console.error('Failed to fetch events:', error)
        ElMessage.error('获取演出数据失败')
      }
    }

    const viewEvent = (id) => {
      router.push(`/events/${id}`)
    }
    
    // 组件挂载时获取演出数据
    onMounted(() => {
      fetchEvents()
    })

    // 格式化日期显示
    const formatDate = (dateString) => {
      if (!dateString) return ''
      const date = new Date(dateString)
      return date.toLocaleDateString('zh-CN')
    }

    return {
      carouselItems,
      featuredEvents,
      viewEvent,
      formatDate
    }
  }
}
</script>

<style scoped>
.carousel-item {
  height: 400px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-title {
  position: absolute;
  color: white;
  font-size: 24px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.event-image {
  height: 200px;
  overflow: hidden;
}

.event-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
</style>